import { Table } from "antd";
import "./index.scss";
import { useState, useEffect } from "react";
import type { ColumnsType } from "antd/es/table";
import { useNavigate } from "react-router-dom";
import "react-quill/dist/quill.snow.css";
import http from "../../../../utils/http";

const Contact = () => {
  //返回
  const navigate = useNavigate();
  const fh = (link: string) => {
    navigate("/zhome" + link);
  };

  //表内容
  const [data, setData] = useState([]);
  const columns: ColumnsType<DataType> = [
    {
      title: "联系方式",
      dataIndex: "contact",
      key: "contact",
    },
  ];

  // 表格信息
  interface DataType {
    key: string;
    contact: String;
  }

  // 渲染数据
  const getData = () => {
    http({
      url: "/getContact",
    }).then((res) => {
      console.log("所有数据", res);
      let _data = res.data.map((v: { id: number }) => {
        return { ...v, key: v.id };
      });
      setData(_data);
    });
  };
  useEffect(() => {
    getData();
  }, []);

  return (
    <div className="Contact">
      <div className="top">
        <div className="top-l">
          <p
            className="title"
            onClick={() => {
              fh("/setUp");
            }}
          >
            设置
          </p>
          <div>&gt;</div>
          <p className="detail">联系方式</p>
        </div>
      </div>

      <div className="hr"></div>

      <Table
        columns={columns}
        dataSource={data}
        bordered={true}
        pagination={false}
        style={{
          paddingTop: "20px",
        }}
      />
    </div>
  );
};
export default Contact;
